<template>
	<view class="map">
		<navBar
		  left-icon="back"
		  :isBackGround="false"
		  @onLeftIcon="onLeftIcon"
		>
		<template v-slot:center>
			<view class="search" @click="search">搜索电站位置</view>
		</template>
		</navBar>
		<view class="map_content">
			<map id="popMap" style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :show-location="true"
			  :show-compass="true" :circles="circles"></map>
		</view>
		<view class="bottom">
			<view class="itude">
				<view >经度</view>
				<view >{{longitude}}</view>
			</view>
			<view class="itude">
				<view >纬度</view>
				<view >{{latitude}}</view>
			</view>
			<view class="btn">
				<button type="primary" @click="sub">完成</button>
			</view>
		</view>
	</view>
</template>

<script>
	import img from '@/static/img/location.png'
	import navBar from "@/components/navbar/index.vue"
	export default {
		components:{
			navBar
		},
		data() {
			return {
				latitude: 31.909,
				longitude: 116.39742,
				circles:[],
				address:"",
			}
		},
		 onReady(){
			uni.getLocation({
				geocode:true,
				type:"gcj02",
				success:(res)=>{
					this.address = res.address
					this.latitude= res.latitude
					this.longitude = res.longitude
					this.circles=[{
							latitude:res.latitude,
							longitude:res.longitude,
							color:'#ff0000AA',
							fillColor:'#ff0000AA',
							radius:30
						}]
				}
			})
			// #ifdef APP-PLUS
			this.addMapEvent()
			// #endif
		},
		methods: {
			onLeftIcon(){
				uni.navigateBack()
			},
			addMapEvent() {
				console.log('111');
				let that = this;
				var maps = uni.createMapContext("popMap", this).$getAppMap();
				maps.onclick = function(point) {
					that.longitude = point.longitude
					that.latitude = point.latitude
					that.circles = [{
						latitude: point.latitude,
						longitude: point.longitude,
						color:'#ff0000AA',
						fillColor:'#ff0000AA',
						radius:30
					}]
				}
			},
			//搜索
			search(){
				uni.chooseLocation({
					success:(res)=>{
						this.longitude = res.longitude
						this.latitude = res.latitude
						this.circles = [{
							latitude: res.latitude,
							longitude: res.longitude,
							color:'#ff0000AA',
							fillColor:'#ff0000AA',
							radius:30
						}]
						this.address = res.address
					}
				})
			},
			//完成返回值
			sub(){
				const params={
					latitude:this.latitude,
					longitude:this.longitude,
					address:this.address
				}
				uni.navigateTo({
					url:'/pages/stations/addStation/index',
					success:(res)=>{
						res.eventChannel.emit('getMapParams',params)
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.map{
		.bottom{
			z-index:99999;
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			background-color: #fff;
			.btn{
				padding: 20rpx 0;
				display: flex;
				justify-content: center;
				button{
					width: 50%;
				}
			}
			.itude{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #ccc;
				padding: 30rpx 0;
				view{
					padding: 0 40rpx;
					color:#666
				}
			}
		}
		.search{
			width: 400rpx;
			line-height: 70rpx;
			text-align: center;
			height: 70rpx;
			font-size: 12px;
			color: #999;
			border-radius: 40rpx;
			background-color: #cccccc55;
		}
	}
</style>
